<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        span {
            display: block;
            float: left
        }


        .wrapper .timebox {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 0;
            left: 0;
            border-radius: 100%;
            transition: all 0.5s
        }

        .timebox span {
            transition: all 0.5s;
            float: left
        }

        .wrapper .timebox span {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 40px;
            height: 18px;
            margin-top: -9px;
            margin-left: -20px;
            text-align: right
        }
    </style>
    <title>FFXIV</title>
</head>
<body>

<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<script>
    let wrapper = document.getElementById("wrapper");
    let monthBox = document.getElementById("monthBox");
    let dateBox = document.getElementById("dateBox");
    let hourbox = document.getElementById("hourbox");
    let minutebox = document.getElementById("minutebox");
    let secondbox = document.getElementById("secondbox");
    let findSiblings = (tag) => {
        let parent = tag.parentNode;
        let childs = parent.children;
        let sb = [];
        for (let i = 0; i <= childs.length - 1; i++) {
            if (childs[i] !== tag) {
                sb[sb.length] = childs[i]
            }
        }
        ;
        return sb
    };
    let removeSiblingClass = (tag) => {
        let sb = findSiblings(tag);
        for (let i = 0; i <= sb.length - 1; i++) {
            sb[i].className = ""
        }
    };
    let initMonth = () => {
        for (let i = 1; i <= 12; i++) {
            let span = document.createElement("span");
            span.innerHTML = i + "月";
            monthBox.appendChild(span)
        }
    };
    let initDate = () => {
        for (let i = 1; i <= 31; i++) {
            let span = document.createElement("span");
            span.innerHTML = i + "日";
            dateBox.appendChild(span)
        }
    };
    let initHour = () => {
        for (let i = 0; i <= 23; i++) {
            let h = i;
            let span = document.createElement("span");
            if (h < 10) {
                h = "0" + h
            }
            span.innerHTML = h + "点";
            hourbox.appendChild(span)
        }
    };
    let initMinute = () => {
        for (let i = 0; i <= 59; i++) {
            let f = i;
            let span = document.createElement("span");
            if (f < 10) {
                f = "0" + f
            }
            span.innerHTML = f + "分";
            minutebox.appendChild(span)
        }
    };
    let initSecond = () => {
        for (let i = 0; i <= 59; i++) {
            let miao = i;
            let span = document.createElement("span");
            if (miao < 10) {
                miao = "0" + miao
            }
            span.innerHTML = miao + "秒";
            secondbox.appendChild(span)
        }
    };
    let changeTime = (tag) => {
        tag.className = "on";
        removeSiblingClass(tag)
    };
    let initRili = () => {
        initMonth();
        initDate();
        initHour();
        initMinute();
        initSecond()
    };
    let showNow = (mydate) => {
        let month = mydate.getMonth();
        let date = mydate.getDate();
        let hour = mydate.getHours();
        let minute = mydate.getMinutes();
        let second = mydate.getSeconds();
        changeTime(monthBox.children[month]);
        changeTime(dateBox.children[date - 1]);
        changeTime(hourbox.children[hour]);
        changeTime(minutebox.children[minute]);
        changeTime(secondbox.children[second])
    };
    let textRound = (tag, num, dis) => {
        let span = tag.children;
        for (let i = 0; i <= span.length - 1; i++) {
            span[i].style.transform = "rotate(" + (360 / span.length) * i + "deg)  translateX(" + dis + "px)"
        }
    };
    let rotateTag = (tag, deg) => {
        tag.style.transform = "rotate(" + deg + "deg)"
    };
    let timeRun = () => {
        initRili();
        setInterval(() => {
            let mydate = new Date();
            showNow(mydate)
        }, 1000);
        setTimeout(() => {
            wrapper.className = "wrapper";
            textRound(monthBox, 12, 40);
            textRound(dateBox, 31, 80);
            textRound(hourbox, 24, 120);
            textRound(minutebox, 60, 160);
            textRound(secondbox, 60, 200);
            setInterval(() => {
                let mydate = new Date();
                rotateTag(monthBox, -30 * mydate.getMonth());
                rotateTag(dateBox, -360 / 31 * (mydate.getDate() - 1));
                rotateTag(hourbox, -360 / 24 * mydate.getHours());
                rotateTag(minutebox, -6 * mydate.getMinutes());
                rotateTag(secondbox, -6 * mydate.getSeconds())
            }, 1000)
        }, 0)
    };
    timeRun();
</script>
</body>
</html>
